<template>
  <view class="flex-col">
    <view class="page-wrap" :class="canEdit?'bottom115':''">
      <uni-forms ref="form" :value="form" labelWidth="auto" :labelPosition="canEdit?'top':'left'">

        <uni-forms-item :required="canEdit" name="customerName" label="客户名称:" :rules="[{
                                         required: true,
                                         errorMessage: '请输入客户名称',
                                         validateTrigger: 'blur'
                                       }]">
          <uni-easyinput v-if="canEdit" type="text" v-model="form.customerName" placeholder="请输入客户名称"/>
          <text v-else class="text-value">{{ form.customerName|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item :required="canEdit" name="customerPhone" label="联系方式:" :rules="[{
                                         required: true,
                                         errorMessage: '请输入联系方式',
                                         validateTrigger: 'blur'
                                       }]">
          <uni-easyinput v-if="canEdit" maxlength="12" type="number" v-model="form.customerPhone"
                         placeholder="请输入联系方式"/>
          <text v-else class="text-value">{{ form.customerPhone|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item :required="canEdit" name="customerTypeCode" label="客户类型:" :rules="[{
                                         required: true,
                                         errorMessage: '请选择客户类型',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            v-model="form.customerTypeCode"
            dataKey="label"
            dataValue="value"
            v-if="canEdit"
            :localdata="dict.type.customer_type"></zxz-uni-data-select>
          <dict-tag v-else
                    :options="dict.type.customer_type"
                    :value="form.customerTypeCode"/>
        </uni-forms-item>

        <uni-forms-item name="customerLabel" label="客户标签:">
          <zxz-uni-data-select
            @change="val=>form.customerLabelCode = val ? val.value:null"
            v-model="form.customerLabel"
            dataKey="label"
            dataValue="label"
            v-if="canEdit"
            :localdata="dict.type.customer_label"></zxz-uni-data-select>
          <text v-else class="text-value">{{ form.customerLabel|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item name="customerPropertyCode" label="客户属性:">
          <zxz-uni-data-select
            v-model="form.customerPropertyCode"
            dataKey="label"
            dataValue="value"
            v-if="canEdit"
            :localdata="dict.type.customer_property"></zxz-uni-data-select>
          <dict-tag v-else
                    :options="dict.type.customer_property"
                    :value="form.customerPropertyCode"/>
        </uni-forms-item>

        <uni-forms-item name="customerLevelCode" label="客户等级:">
          <zxz-uni-data-select
            v-model="form.customerLevelCode"
            dataKey="label"
            dataValue="value"
            v-if="canEdit"
            :localdata="dict.type.customer_level"></zxz-uni-data-select>
          <dict-tag v-else
                    :options="dict.type.customer_level"
                    :value="form.customerLevelCode"/>
        </uni-forms-item>

        <uni-forms-item :required="canEdit" name="businessScopeCode" label="业务范围:" :rules="[{
                                         required: true,
                                         errorMessage: '请选择业务范围',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            v-model="form.businessScopeCode"
            dataKey="label"
            dataValue="value"
            v-if="canEdit"
            :localdata="dict.type.business_scope"></zxz-uni-data-select>
          <dict-tag v-else
                    :options="dict.type.business_scope"
                    :value="form.businessScopeCode"/>
        </uni-forms-item>

        <uni-forms-item name="contact" label="紧急联系人:">
          <uni-easyinput v-if="canEdit" type="text" v-model="form.contact" placeholder="请输入紧急联系人"/>
          <text v-else class="text-value">{{ form.contact|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item name="contactPhone" label="紧急联系人联系方式:">
          <uni-easyinput v-if="canEdit" type="number" maxlength="12" v-model="form.contactPhone"
                         placeholder="请输入紧急联系人联系方式"/>
          <text v-else class="text-value">{{ form.contactPhone|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item name="cluesSource" label="线索来源:">
          <zxz-uni-data-select
            @change="val=>form.cluesSourceCode = val ? val.value:null"
            v-model="form.cluesSource"
            dataKey="label"
            dataValue="label"
            v-if="canEdit"
            :localdata="dict.type.clues_source"></zxz-uni-data-select>
          <text v-else class="text-value">{{ form.cluesSource|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item name="cluesStatus" label="线索状态:">
          <zxz-uni-data-select
            @change="val=>form.cluesStatusCode = val ? val.value:null"
            v-model="form.cluesStatus"
            dataKey="label"
            dataValue="label"
            v-if="canEdit"
            :localdata="dict.type.clues_status"></zxz-uni-data-select>
          <text v-else class="text-value">{{ form.cluesStatus|filterNull }}</text>

        </uni-forms-item>

        <uni-forms-item :required="canEdit" name="cluesIntentionCode" label="意向情况:"
                        :rules="[{
                                         required: true,
                                         errorMessage: '请选择意向情况',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            v-model="form.cluesIntentionCode"
            dataKey="label"
            dataValue="value"
            v-if="canEdit"
            :localdata="dict.type.clues_intention"></zxz-uni-data-select>
          <dict-tag v-else
                    :options="dict.type.clues_intention"
                    :value="form.cluesIntentionCode"/>
        </uni-forms-item>

        <uni-forms-item :required="canEdit" name="cluesFollowerTypeCode" label="跟进人:"
                        :rules="[{
                                         required: true,
                                         errorMessage: '请选择跟进人',
                                         validateTrigger: 'bind'
                                       }]">
          <zxz-uni-data-select
            v-model="form.cluesFollowerTypeCode"
            dataKey="label"
            dataValue="value"
            v-if="canEdit"
            :localdata="dict.type.clues_follower_type"></zxz-uni-data-select>
          <text v-else class="text-value">{{ form.followerNames|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item v-if="2==form.cluesFollowerTypeCode && canEdit" name="deptLabel"
                        label="选择组织:">
          <empty-input @empClick="showPicker" v-if="canEdit" v-model="form.deptLabel"
                       placeholder="请选择"></empty-input>
          <text v-else class="text-value">{{ form.deptLabel|filterNull }}</text>
        </uni-forms-item>

        <uni-forms-item v-if="2==form.cluesFollowerTypeCode && canEdit"
                        :required="canEdit" name="followerIdList" label="选择用户:"
                        :rules="[{
                                 required: true,
                                 errorMessage: '请选择用户',
                                 validateTrigger: 'bind'
                               }]">
          <zxz-uni-data-select
            v-model="form.followerIdList"
            dataKey="userName" multiple
            dataValue="userId"
            v-if="canEdit"
            :localdata="userList"></zxz-uni-data-select>
          <text v-else class="text-value">{{ form.followerNames|filterNull }}</text>
        </uni-forms-item>

      </uni-forms>
    </view>

    <view class="button-container" v-if="canEdit">
      <button class="btn-item" @click="submit">提 交</button>
    </view>

    <ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择组织"
                    :localdata="deptOptions" valueKey="id" textKey="label" childrenKey="children"/>
  </view>
</template>

<script>
import {cluesAdd, cluesDetail} from "@/api/memberManage/clueList";
import {deptTreeSelect, listUser} from "@/api/system/user";

export default {
  dicts: ["customer_type", "customer_label", "customer_property", "customer_level", "business_scope",
    "clues_source", "clues_status", "clues_intention", "clues_follower_type"],
  data() {
    return {
      form: {
        followerIdList:[]
      },
      state: 'write',
      cluesId: null,
      deptOptions: null,
      userList: [],
    }
  },
  computed: {
    canEdit() {
      return 'write' === this.state;
    }
  },
  onLoad(op) {
    this.getDeptTree();
    // this.getUserList();
    console.log('op', op);
    this.state = op?.state ?? 'write';
    this.cluesId = op?.cluesId ?? null;

    let title = '新增线索';
    if (this.cluesId) {
      this.getOldData();
      title = '线索详情';
    }
    uni.setNavigationBarTitle({
      title
    })
  },
  methods: {
    /** 查询组织下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 显示选择器
    showPicker() {
      console.log('showPicker')
      this.$refs.treePicker._show();
    },
    //监听选择（ids为数组）
    selectChange(ids, names) {
      console.log('selectChange', ids, names);
      this.form.deptId = ids[0];
      this.form.deptLabel = names;

      this.form.followerIdList = null;

      this.getUserList();
    },
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 100000,
        deptId: this.form?.deptId ?? null,
        status: 0
      }).then(response => {
          this.userList = response.rows;
          // this.total = response.total;
          // this.loading = false;
        }
      );
    },
    getOldData() {
      cluesDetail(this.cluesId).then(res => {
        this.form = res?.data?.clues ?? {}
      })
    },
    submit() {
      this.$refs.form.validate().then(res => {
        uni.showLoading();
        cluesAdd(this.form).then(response => {
          uni.hideLoading();
          uni.$emit("refreshClue", true);
          this.$modal.msgSuccess("提交成功");
          setTimeout(() => {
            this.$tab.navigateBack();
          }, 1000)
        }).finally(f => {
			setTimeout(() => {
			  uni.hideLoading();
			}, 1000)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
